<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getGoodsAPI, addGoodsInAPI} from "@/axios/api";
import {ElMessage} from "element-plus";

const commodityName_list = ref([])
const GoodsInForm = ref({
  gid: Number() || null,
  number: Number() || null,
  costPrice: Number() || null,
  per: "",
  entryPerson: "",
  remark: ""
})

const formText = {
  commodityName: "商品名称",
  enterStoreNum: "入库数量",
  per: "单位",
  costPrice: "价格",
  recordEmployee: "录入人员",
  enterStoreRemark: "备注"
}

onMounted(() => {
  getGoods()
})

function getGoods() {
  getGoodsAPI({
    pageNum: null,
    pageSize: null
  }).then(data => {
    commodityName_list.value = data.data.data.stockList
    console.log(commodityName_list.value)
  })
}


function addGoodsIn() {
  if (GoodsInForm.value.gid == null) {
    ElMessage.error("商品名不能为空")
    return
  }
  if (GoodsInForm.value.number == null) {
    ElMessage.error("入库数量不能为空")
    return
  }
  // if (GoodsInForm.value.per == null
  //     || GoodsInForm.value.per == "") {
  //   ElMessage.error("单位不能为空")
  //   return
  // }
  if (GoodsInForm.value.costPrice == null) {
    ElMessage.error("价格不能为空")
    return
  }
  if (GoodsInForm.value.entryPerson == null
      || GoodsInForm.value.entryPerson == "") {
    ElMessage.error("录入人员不能为空")
    return
  }
  for (let i = 0; i < commodityName_list.value.length; i++) {
    if (GoodsInForm.value.gid == commodityName_list.value[i].id) {
      GoodsInForm.value.per = commodityName_list.value[i].per
    }
  }
  // {
  //   g_id: GoodsInForm.value.g_id,
  //       number: Number(GoodsInForm.value.number),
  //     costPrice: Number(GoodsInForm.value.costPrice),
  //     per: GoodsInForm.value.per,
  //     entryPerson: GoodsInForm.value.entryPerson,
  //     remark: GoodsInForm.value.remark
  // }
  addGoodsInAPI(GoodsInForm.value).then(data => {
    ElMessage.success(data.data.data)
    empty()
  })
}

function empty() {
  for (const key in GoodsInForm.value) {
    GoodsInForm.value[key] = null
  }
}
</script>
<template>
  <el-form
      :model="GoodsInForm"
      label-width="auto"
      style="max-width: 600px"
  >

    <el-form-item
        :label="`${formText.commodityName}:`"
    >
      <el-select
          v-model="GoodsInForm.gid"
          placeholder="请选择商品"
          filterable
      >
        <el-option
            v-for="item in commodityName_list"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item
        :label="`${formText.enterStoreNum}:`"
    >
      <el-input
          v-model="GoodsInForm.number"
          type="number"
          placeholder="请输入库数量"
      />
    </el-form-item>

    <el-form-item
        :label="`${formText.costPrice}:`"
    >
      <el-input
          v-model="GoodsInForm.costPrice"
          type="number"
          placeholder="请输入价格"
          :step="0.01"
      />
    </el-form-item>

    <!--    <el-form-item-->
    <!--        :label="`${formText.per}:`"-->
    <!--    >-->
    <!--      <el-input-->
    <!--          v-model="GoodsInForm.per"-->
    <!--          placeholder="请输入单位"-->
    <!--      />-->
    <!--    </el-form-item>-->

    <el-form-item
        :label="`${formText.recordEmployee}:`"
    >
      <el-input
          v-model="GoodsInForm.entryPerson"
          placeholder="输入名字"
      />
    </el-form-item>

    <el-form-item
        :label="`${formText.enterStoreRemark}:`"
    >
      <el-input
          v-model="GoodsInForm.remark"
          type="textarea"
          placeholder="请输入备注信息"
          show-word-limit
          maxlength="250"
      />
    </el-form-item>

    <el-form-item
        label=" "
    >
      <el-button
          type="primary"
          @click="addGoodsIn"
      >入库
      </el-button>
      <el-button
          @click="empty"
      >取消
      </el-button>
    </el-form-item>
  </el-form>
</template>